<template>
  <div>
    <!-- 计算属性和方法的区别：方法调用总是会在重渲染发生时再次执行函数 -->
    {{ trfe }}-{{ undefined }}
    <el-button @click="trfe++">点击</el-button>
    方法-{{ methods() }}
    <!-- value对象的值, key对象的键, index索引，从0开始 -->
    <div v-for="(value, index) in obj" :key="value">
      {{ value }}-{{ index }}
    </div>
    <!-- set,map,array遍历方式是一样的 v-for set实际是通过for (let value of set.values()) {} -->
    <div v-for="(item, index) in set" :key="item">{{ item }}-{{ index }}</div>
    <!-- v-for map实际是通过for (let value of map.entries()) {} -->
    <div v-for="([key, value], index) in map" :key="index">
      {{ key }}-{{ value }}-{{ index }}
    </div>
    <div v-for="(item, index) in nuwassmb" :key="item">
      {{ item }}-{{ index }}
    </div>

    <div v-for="(value, index) in 'asdfg'" :key="index">
      {{ value }}-{{ index }}
    </div>
    <!-- v-memo的使用 -->
    <!-- <div v-for="(item) in demoLists" :key="item.id" v-memo="[item.id]">
        {{ item.name }}
    </div> -->
    <!-- ters是undefined和null时不报错 -->
    <div v-for="(item, index) in ters" :key="index">
      aaaaaaaaaaaa
      {{ item.name }}
    </div>
    <div v-for="(item, index) in _teys" :key="index">
      {{ item }}
    </div>
    <div v-for="(item, index) in teys_" :key="index">
      {{ item }}
    </div>
    <div @click="sdf">563000</div>
    {{ test }}-{{ sdf() }}
    <hr />
    <div v-for="(value, index) in 10" :key="index">{{ value }}-{{ index }}</div>
    <hr />
    <!-- 这里的key必须用item.id不能用index，如果用index勾选苹果，删除华为，会出现勾选跑到谷歌上的BUG -->
    <div v-for="(item, index) in listsq" :key="index">
      <el-checkbox size="large" />
      {{ item.name }}
      <span @click="listsq.splice(index, 1)">删除</span>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  watchPostEffect,
  watch,
  shallowRef,
  computed,
  reactive,
} from "vue";
import { test, sdf } from "./index";
const trfe = ref(10);
const methods = () => {
  console.log("方法");
  return 555555;
};
let listsq = ref([
  {
    id: 11,
    name: "华为",
  },
  {
    id: 12,
    name: "苹果",
  },
  {
    id: 13,
    name: "谷歌",
  },
  {
    id: 14,
    name: "特斯拉",
  },
  {
    id: 15,
    name: "微软",
  },
]);

const ters = ref(undefined);
const teys = ref([111111, 3333333, 22222, 44444444444]);
const _teys = computed(() => teys.value.reverse());
const teys_ = computed(() => teys.value.sort());
const msg = ref(0);
const context = ref("屏幕闪动");
const html = ref("<span>111</span>");
const gdff = ref([{ name: "qqqqq", age: 30 }]);
const title = ref("wteyr");
const numb = ref(10);
const obj = ref({ name: "wtey", age: 10 });
const nuwassmb = ref([11, 22, 33, 44]);

const map = ref(
  new Map([
    ["name", "qwe"],
    ["age", 10],
  ])
);
const set = ref(new Set([1, 2, 3, 4]));
// for (let item of map)                                                                                                                      ) {
//   console.log(item,60000);
// }
const set1 = new Set([1, 2, 3, 4]);
console.log(set1.keys(), set1.values(), set1.entries());
setTimeout(() => {
  set.value.add(5);
  map.value.set({}, "jkll");
}, 1000);

let divBox = ref(null);
// watchPostEffect(()=>{
//   divBox.value.newProp = '我是一个新属性1'
//   divBox.value.setAttribute('tiTle3', '我是元素自定义的attribute')
//   divBox.value.setAttribute('SYDHHF', '我是元素自定义的attribute')
//   console.log(divBox.value,divBox.value.attributes,"attributes：",divBox.value.getAttribute("SYDHHF"),divBox.value.getAttribute("tiTle3"),divBox.value.getAttribute("sh"),divBox.value.id, 9630000);
// })

// v-memo
const arr = new Array(1000);
// 定义一个对象
const foodObj = {
  mao: "猫",
  yang: "羊",
  gou: "狗",
};
// input绑定的值
const food = ref("mao");
// v-memo依赖的值
const valueA = ref(0);
watch(food, (newVal) => {
  console.log(newVal, 74560);
  if (Object.keys(foodObj).includes(newVal)) {
    valueA.value++;
    console.log(523000);
  }
});

const arrayLisys = [];
for (let i = 1; i < 20000; i++) {
  arrayLisys.push({
    id: i,
    name: "demo" + i,
  });
}

const demoLists = shallowRef(arrayLisys);

setTimeout(() => {
  const lists = [];
  for (let i = 0; i < 10; i++) {
    lists.push({
      id: i + "-",
      name: "demo1" + i,
    });
  }
  const start1 = performance.now();
  demoLists.value = [...arrayLisys, ...lists];
  console.log(performance.now() - start1, 50000);
}, 3000);
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.box {
  display: inline-block;
  width: 150px;
}
</style>
